<template>
  <div>
    <div style="text-align: right; margin-bottom: 20px">
      <el-button style="background-color: #000; color: #fff"
        >商品替换设置</el-button
      >
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="发布对象">
        <template v-slot="scope">
          <div style="position: relative">
            <span>{{ scope.row.shopName }}</span>
            <el-button
              type="text"
              style="color: #ff6347; position: absolute; right: 11px; top: -8px"
              @click="handleSyncData(scope)"
              >同步数据</el-button
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="brand" label="品牌">
        <template v-slot="scope">
          <!-- <el-input v-model="scope.row.brand" placeholder="请输入品牌进行搜素,并对搜索的结果进行选择"></el-input> -->
          <el-autocomplete
            v-model="scope.row.brand"
            :fetch-suggestions="(q, b) => querySearchAsync(q, b, scope.row)"
            placeholder="请输入品牌进行搜素,并对搜索的结果进行选择"
            @select="handleSelect"
          ></el-autocomplete>
        </template>
      </el-table-column>
      <el-table-column prop="template" label="运费模板">
        <template v-slot="scope">
          <el-select v-model="scope.row.template" placeholder="请选择">
            <el-option
              v-for="item in scope.row.feightTemplate"
              :key="item.templateId"
              :label="item.templateName"
              :value="item.templateId"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="scope" label="店铺分类">
        <template v-slot="scope">
          <el-select v-model="scope.row.type" placeholder="请选择">
            <el-option
              v-for="item in scope.row.typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="关联视频 (查看教程)">
        <template v-slot="scope">
          <div>
            <el-input
              v-model="scope.row.video"
              placeholder="请输入需要关联视频信息"
            ></el-input>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {
  queryShopListById,
  synchronousData,
  searchPddBrand,
} from "@/api/product/productInfo";
export default {
  data() {
    return {
      accessToken: "3a4b59681c9743e5a75b5bde46c715e284558d9c",
      tableData: [
        // {
        //     label: '壳喜壳乐数码店',
        //     typeOptions: [{
        //         value: '0',
        //         label: '不分类'
        //     }],
        //     templateOptions: [{
        //         value: '0',
        //         label: '平台默认模板'
        //     }]
        // }
      ],
    };
  },
  props: {
    releaseItem: {
      type: Object,
      default: {},
    },
    releaseInfo: {
      type: Object,
      default: {},
    },
  },
  mounted() {
    console.log("this.releaseItem", this.releaseInfo.common);
    if (this.releaseInfo.accessToken) {
      this.accessToken = this.releaseInfo.accessToken;
      this.$nextTick(() => {
        this.queryShopListById();
      });
    }
  },
  methods: {
    querySearchAsync(queryString, cb, scope) {
      console.log("queryString", queryString);
      console.log("cb", cb);
      console.log("ccc", scope);
      // console.log('queryString', queryString);
      // console.log('cb', cb);
      if (!queryString) return;
      const catId = this.releaseInfo.common.catId;
      const value = queryString;
      const shopId = this.releaseInfo.common.shopId;

      searchPddBrand(catId, value, shopId).then((res) => {
        const restaurants = res.value;
        var results = queryString
          ? restaurants.filter(this.createStateFilter(queryString))
          : restaurants;
        cb(results);
      });

      // var restaurants = this.restaurants;
      // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      // clearTimeout(this.timeout);
      // this.timeout = setTimeout(() => {
      //     cb(results);
      // }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    queryShopListById() {
      // console.log('this.releaseItem.common.shopId', this.releaseInfo.common);
      const shopIds = this.releaseInfo.common.shopId;
      // const shopIds = 'd0165224'
      queryShopListById(shopIds, this.accessToken).then((res) => {
        this.tableData = res.value;
      });
    },
    handleSyncData() {
      // const shopId = 'd0165224'
      const shopId = this.releaseInfo.common.shopId;

      this.$confirm("是否同步此店铺的运费模板、店铺分类、品牌等数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then((res) => {
          synchronousData(shopId, this.accessToken).then((res) => {
            this.queryShopListById();
            this.$message.success("同步成功");
          });
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    handleEmitData() {
      if(!this.tableData[0].template) {
            this.$message.error("请选择运费模板");
            return false
      }
      this.$emit("send", {
        common2: {
          costTemplateId: this.tableData[0].template,
        },
      });
      return true;
    },
  },
};
</script>

<style lang="scss" scope></style>